import { SCButton } from '@sribd/sc-ui/lib';
<template>
    <div class="download-container">
        <div class="download-header">
            <div class="logo-container">
                <a href="/" class="logo-link" alt="深圳市大数据研究院" />
            </div>
        </div>
        <div class="download-main">
            <div class="download-content">
                <div class="software-container">
                    <div class="left">
                        <h2>下载数据标注桌面插件</h2>
                        <div class="desc">
                            <SvgIcon icon-class="list" class="list-icon" />
                            开发者：深圳市大数据研究院 l 版本号：v1.0
                        </div>
                        <div class="download-dashboard">
                            <div class="win-logo"></div>
                            <div class="win-title">Windows 客户端</div>
                            <div class="software-version">支持win10及以上的系统版本</div>
                            <SCButton type="primary" class="download-button" @click="downloadFunc">
                                <SvgIcon icon-class="cloud" class="cloud-icon" />
                                下载
                            </SCButton>
                        </div>
                    </div>
                    <div class="right"></div>
                </div>
            </div>
            <div class="download-footer">Copyright © 深圳市大数据研究院</div>
        </div>
    </div>
</template>
<script setup lang="ts">
// import { computed } from "vue";
// const isWin = computed(() => {
//     return navigator.userAgent?.toLowerCase().includes("win");
// });
const downloadFunc = () => {
    window?.open(
        "http://10.26.6.239:9000/sci-research/sci-management/1712571968053-数据标注桌面插件.zip",
    );
};
</script>
<style lang="scss" scoped>
@function getVWValue($pxValue) {
    @return #{calc($pxValue/1680 * 100)}vw;
}
@function getVHValue($pxValue) {
    @return #{calc($pxValue/945 * 100)}vh;
}
.download-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.download-header {
    height: 50px;
    background: #fff;
    box-sizing: border-box;
    padding: 7px 20px 6px;
}
.logo-link {
    display: inline-block;
    width: 200px;
    height: 37px;
    background: url(../../assets/login_logo.png) no-repeat;
    background-size: contain;
}
.download-main {
    flex: 1;
    background: url(../../assets/bg@2x.png) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    padding-top: getVHValue(120);
    width: 100%;
    box-sizing: border-box;
}
.download-content {
    flex: 1;
    padding-left: getVWValue(320);
    padding-right: getVWValue(178);
}
.download-footer {
    background: rgba(250, 250, 255, 1);
    height: 40px;
    font-size: 12px;
    color: rgba(27, 24, 27, 0.7);
    line-height: 40px;
    text-align: center;
    width: 100%;
}
.download-dashboard {
    margin: 60px 0 0 30px;
    background: #ffffff;
    box-shadow: 0px 4px 24px 0px rgba(25, 28, 104, 0.1);
    border-radius: 12px;
    width: 320px;
    height: 347px;
    box-sizing: border-box;
    padding-top: 40px;
    text-align: center;
}
.software-container {
    width: getVWValue(1181);
    height: getVHValue(544);
    display: grid;
    grid-template-columns: getVWValue(437.5) getVWValue(595);
    grid-gap: getVWValue(148);
    .right {
        width: getVWValue(595);
        height: 100%;
        background: url(../../assets/download-img@2x.png) no-repeat;
        background-size: contain;
        margin-top: 6px;
    }
    h2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 40px;
        color: #1b181b;
        line-height: 40px;
        margin: 0 0 30px;
    }
    .desc {
        font-size: 20px;
        line-height: 28px;
        color: rgba(27, 24, 27, 0.7);
    }
}
.win-logo {
    width: 120px;
    height: 120px;
    background: url(../../assets/win-logo@2x.png) no-repeat;
    background-size: contain;
    margin: 0 auto 30px;
}
.win-title {
    font-weight: 500;
    font-size: 18px;
    text-align: center;
}
.software-version,
.other-platform-title {
    font-size: 14px;
    color: rgba(27, 24, 27, 0.7);
    margin: 16px auto 30px;
    text-align: center;
    line-height: 1.2;
}
.other-platform-title {
    font-size: 16px;
}
:deep(.download-button) {
    width: 102px;
    height: 36px;
    line-height: 36px;
}
:deep(.cloud-icon) {
    margin-right: 8px;
}
:deep(.list-icon) {
    margin-right: 4px;
}
@media (max-height: 944px) {
    .download-main {
        padding-top: 20px;
        h2 {
            padding-top: 20px;
        }
    }
    .download-dashboard {
        margin-top: 40px;
    }
}
@media (max-width: 1679px) {
    .download-main {
        padding-left: 0;
        padding-right: 0;
    }
    .download-content {
        padding: 0;
    }
    .download-content {
        display: flex;
        justify-content: center;
    }
    .software-container {
        width: 1181px;
        height: 544px;
        grid-template-columns: 437.5px 595px;
        grid-gap: 148px;
        .right {
            width: 595px;
        }
        h2 {
            font-size: 32px;
        }
        .desc {
            font-size: 16px;
        }
    }
}
</style>
